import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    ListView,
    TouchableOpacity
} from 'react-native';

const {height, width} = Dimensions.get('window');
export default class InquireResultPage extends Component {
    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource:ds.cloneWithRows(this.props.data)
        }
    };

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.titleView}>
                    <Text style={styles.titleMsg}>查询结果</Text>
                    <TouchableOpacity
                        onPress={()=>Actions.pop()}
                        style={styles.goBackView}>
                        <Image
                            source={ImageUtil.GoBack}
                            style={styles.goBackImg}/>
                    </TouchableOpacity>
                </View>
                {this.props.data.length>0
                ?(<ListView
                        renderRow={ (rowData) => this.renderItem(rowData) }
                        dataSource={this.state.dataSource}/>)
                :(<View style={{width:width,alignItems:'center'}}>
                        <Image
                            source={ImageUtil.EnquiriesBackground}
                            style={styles.backgroundImg}/>
                        <Text style={styles.backgroundMsg}>暂时没有查询结果</Text>
                    </View>)}
            </View>
        );
    }
    renderItem=(rowData)=>{
        return(
            <View>
                <TouchableOpacity
                    onPress={()=>Actions.PersonalDataPage({data:rowData})}
                    style={styles.labelView}>
                    <View style={{flexDirection:'row',marginTop:14}}>
                        <Text style={{marginLeft:15,color:'#3090dd',fontSize:14}}>1</Text>
                        <Text style={{color:'#3090dd',fontSize:14,marginLeft:13}}>{rowData.name}</Text>
                    </View>
                    <View style={{flexDirection:'row',marginTop:10}}>
                        <Text style={styles.labelLeftMsg}>身份证号</Text>
                        <Text style={{marginLeft:10,fontSize:14}}>：</Text>
                        <Text sgtyle={styles.labelRightMsg}>{rowData.idCard}</Text>
                    </View>
                    <View style={{flexDirection:'row',marginTop:10}}>
                        <Text style={styles.labelLeftMsg}>所在地区</Text>
                        <Text style={{marginLeft:10,fontSize:14}}>：</Text>
                        <Text sgtyle={styles.labelRightMsg}>{rowData.area}</Text>
                    </View>
                </TouchableOpacity>
            </View>
        )
    };
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor:'#f0f0f0'
    },
    titleView:{
        height:64,
        backgroundColor:'#ffffff',
        alignItems:'center',
        borderBottomWidth:1,
        borderColor:'#e4e4e4'
    },
    titleMsg:{
        fontSize:17,
        color:'#000000',
        marginTop:67/2
    },
    goBackView:{
        position: 'absolute',
        top:65/2,left:15,
    },
    goBackImg:{
        height:18,
        width:18
    },
    backgroundImg:{
        marginTop:112,
        height:185,
        width:185
    },
    backgroundMsg:{
        marginTop:14,
        fontSize:17,
        color:'#646464',
        opacity:0.5
    },
    labelLeftMsg:{
        marginLeft:34,
        fontSize:14
    },
    labelRightMsg:{
        marginLeft:7,
        fontSize:14
    },
    labelView:{
        width:width,
        height:97,
        backgroundColor:'#ffffff',
        marginTop:10,
        borderColor:'#cacaca',
        borderBottomWidth:1
    }
});
